<template>
  <div class="head">
    <div class="logo" @click="$router.push('router')">
      <img src="@/assets/logo.png" alt="MDS" />
    </div>
    <div class="right">
      <div
        :class="{ tab: true, active: type === '1' }"
        @click="$router.push('/search')"
      >
        MDS矩阵搜索
      </div>
      <div
        :class="{ tab: true, active: type === '2' }"
        @click="$router.push('/optimize')"
      >
        MDS矩阵优化
      </div>
      <div
        :class="{ tab: true, active: type === '3' }"
        @click="$router.push('/analyze')"
      >
        MDS矩阵分析
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
defineProps<{ type: string }>();
</script>

<style scoped>
.head {
  display: flex;
  height: 150px;
  /* background-color: rgb(92,170,243); */
  background-image: url('@/assets/images/back.png');
  justify-content: space-between;
  font-size: 1.4rem;
}
.logo {
  margin-left: 100px;
  cursor: pointer;
}
.right {
  display: flex;
  margin-right: 100px;
  justify-content: space-around;
  width: 600px;
}
.tab {
  height: 150px;
  line-height: 150px;
  width: 200px;
  transition: 0.25s all;
  color: white;
  text-align: center;
  cursor: pointer;
}
.active,
.tab:hover {
  background-color: #6585ca;
}
</style>
